<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园答疑助手 - 教师首页</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4361ee',
            secondary: '#3f37c9',
            teacher: '#7209b7',
            teacherLight: '#f3e8ff',
            success: '#4cc9f0',
            warning: '#f72585',
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1;
      }
      .nav-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      }
      .question-card {
        @apply bg-white rounded-xl p-4 border border-gray-100 hover:border-teacher/30 hover:shadow-md transition-all duration-300 cursor-pointer;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <nav class="bg-white nav-shadow sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- 标题 -->
      <div class="flex items-center">
        <i class="fa fa-graduation-cap text-teacher text-xl mr-2"></i>
        <h1 class="text-lg font-bold text-gray-800">教师答疑管理系统</h1>
      </div>

      <!-- 搜索框 -->
      <div class="hidden md:flex relative flex-1 max-w-md mx-8">
        <input type="text" placeholder="搜索学生、问题或课程..." 
          class="w-full pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:bg-white border border-transparent focus:border-gray-200 focus:ring-2 focus:ring-teacher/30 focus:outline-none transition-all">
        <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
      </div>

      <!-- 教师区域 -->
      <div class="flex items-center gap-4">
        <button class="relative text-gray-500 hover:text-teacher transition-colors">
          <i class="fa fa-bell text-lg"></i>
          <span class="absolute -top-1 -right-1 w-4 h-4 bg-warning rounded-full text-white text-xs flex items-center justify-center">5</span>
        </button>
        <div class="flex items-center gap-2">
          <img src="https://picsum.photos/id/1005/200" alt="教师头像" class="w-8 h-8 rounded-full object-cover border-2 border-teacher/20">
          <span class="hidden md:inline text-sm font-medium">张教授</span>
        </div>
      </div>
    </div>
  </nav>

  <!-- 快捷数据概览 -->
  <div class="bg-white border-b border-gray-100 py-4">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="text-center">
          <div class="text-2xl font-bold text-teacher">12</div>
          <div class="text-xs text-gray-500 mt-1">待解答问题</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-teacher">86</div>
          <div class="text-xs text-gray-500 mt-1">本周已解答</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-teacher">142</div>
          <div class="text-xs text-gray-500 mt-1">负责学生</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-teacher">5</div>
          <div class="text-xs text-gray-500 mt-1">教授课程</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 主内容区 -->
  <main class="flex-1 container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6">
    <!-- 左侧课程列表 -->
    <div class="md:w-1/4 lg:w-1/5">
      <div class="bg-white rounded-xl p-4 shadow-sm">
        <div class="flex items-center justify-between mb-4">
          <h2 class="font-bold text-gray-800">我的课程</h2>
          <button class="text-teacher hover:text-teacher/80 text-sm">
            <i class="fa fa-plus"></i> 管理
          </button>
        </div>
        
        <div class="space-y-1 max-h-[calc(100vh-280px)] overflow-y-auto pr-2">
          <div class="py-3 px-4 rounded-lg cursor-pointer transition-all bg-teacher text-white">
            <div class="flex items-center justify-between">
              <span>高等数学（上）</span>
              <span class="bg-white/30 text-white text-xs px-2 py-0.5 rounded-full">8</span>
            </div>
          </div>
          <div class="py-3 px-4 rounded-lg cursor-pointer transition-all hover:bg-teacher/10 hover:text-teacher">
            <div class="flex items-center justify-between">
              <span>线性代数</span>
              <span class="bg-teacher/10 text-teacher text-xs px-2 py-0.5 rounded-full">4</span>
            </div>
          </div>
          <div class="py-3 px-4 rounded-lg cursor-pointer transition-all hover:bg-teacher/10 hover:text-teacher">
            <span>复变函数与积分变换</span>
          </div>
        </div>

        <!-- 教学统计 -->
        <div class="mt-6 pt-4 border-t border-gray-100">
          <h3 class="font-bold text-gray-800 mb-3">教学统计</h3>
          <div class="h-40">
            <canvas id="teachingChart"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧内容区 -->
    <div class="md:w-3/4 lg:w-4/5">
      <!-- 顶部筛选栏 -->
      <div class="bg-white rounded-xl p-4 shadow-sm mb-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
          <div class="flex items-center gap-2">
            <button class="px-4 py-2 bg-teacher text-white rounded-lg text-sm font-medium">待解答</button>
            <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition-colors">已解答</button>
            <button class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm font-medium transition-colors">全部问题</button>
          </div>
          <div class="text-sm text-gray-500">
            高等数学（上）· 共8个待解答问题
          </div>
        </div>
      </div>

      <!-- 快捷操作 -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-xl p-4 shadow-sm flex flex-col items-center justify-center card-hover">
          <div class="w-12 h-12 rounded-full bg-teacher/10 flex items-center justify-center text-teacher mb-2">
            <i class="fa fa-bolt"></i>
          </div>
          <span class="text-sm font-medium text-gray-800">优先解答</span>
        </div>
        <div class="bg-white rounded-xl p-4 shadow-sm flex flex-col items-center justify-center card-hover">
          <div class="w-12 h-12 rounded-full bg-teacher/10 flex items-center justify-center text-teacher mb-2">
            <i class="fa fa-calendar"></i>
          </div>
          <span class="text-sm font-medium text-gray-800">答疑安排</span>
        </div>
        <div class="bg-white rounded-xl p-4 shadow-sm flex flex-col items-center justify-center card-hover">
          <div class="w-12 h-12 rounded-full bg-teacher/10 flex items-center justify-center text-teacher mb-2">
            <i class="fa fa-file-text-o"></i>
          </div>
          <span class="text-sm font-medium text-gray-800">批量回复</span>
        </div>
        <div class="bg-white rounded-xl p-4 shadow-sm flex flex-col items-center justify-center card-hover">
          <div class="w-12 h-12 rounded-full bg-teacher/10 flex items-center justify-center text-teacher mb-2">
            <i class="fa fa-bar-chart"></i>
          </div>
          <span class="text-sm font-medium text-gray-800">问题分析</span>
        </div>
      </div>

      <!-- 待解答问题列表 -->
      <div class="space-y-4">
        <!-- 问题卡片1 -->
        <div class="question-card">
          <div class="flex items-start justify-between">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/237/200" alt="学生头像" class="w-8 h-8 rounded-full">
              <div>
                <h3 class="font-medium text-gray-800">李同学</h3>
                <p class="text-xs text-gray-500">2小时前</p>
              </div>
            </div>
            <span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full">高优先级</span>
          </div>
          
          <div class="mt-3">
            <h4 class="font-medium text-gray-800 hover:text-teacher transition-colors">关于洛必达法则的应用条件，这里为什么不能直接使用？</h4>
            <p class="text-gray-600 text-sm mt-2 line-clamp-2">
              这道题是求极限的题目，当x趋近于0时，分子分母都是0，我用了洛必达法则计算，但结果和标准答案不一样，想知道哪里出错了...
            </p>
            <div class="mt-2 flex items-center gap-2">
              <img src="https://picsum.photos/id/180/200" alt="问题图片" class="w-16 h-16 rounded object-cover border border-gray-100">
            </div>
          </div>
          
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-center gap-4 text-sm">
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-comment-o mr-1"></i> 3条学生回复
              </span>
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-eye mr-1"></i> 24
              </span>
            </div>
            <div class="flex items-center gap-2">
              <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs rounded-lg transition-colors">
                稍后解答
              </button>
              <button class="px-3 py-1 bg-teacher hover:bg-teacher/90 text-white text-xs rounded-lg transition-colors">
                立即解答
              </button>
            </div>
          </div>
        </div>

        <!-- 问题卡片2 -->
        <div class="question-card">
          <div class="flex items-start justify-between">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/id/1027/200" alt="学生头像" class="w-8 h-8 rounded-full">
              <div>
                <h3 class="font-medium text-gray-800">王同学</h3>
                <p class="text-xs text-gray-500">昨天 18:30</p>
              </div>
            </div>
            <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">普通</span>
          </div>
          
          <div class="mt-3">
            <h4 class="font-medium text-gray-800 hover:text-teacher transition-colors">定积分的几何应用中，求旋转体体积的步骤是什么？</h4>
            <p class="text-gray-600 text-sm mt-2 line-clamp-2">
              课本上的例题看不太懂，特别是关于如何确定积分区间和被积函数的部分，有没有同学能详细讲一下步骤？
            </p>
          </div>
          
          <div class="mt-3 flex items-center justify-between">
            <div class="flex items-center gap-4 text-sm">
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-comment-o mr-1"></i> 7条学生回复
              </span>
              <span class="text-gray-500 flex items-center">
                <i class="fa fa-eye mr-1"></i> 42
              </span>
            </div>
            <div class="flex items-center gap-2">
              <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs rounded-lg transition-colors">
                稍后解答
              </button>
              <button class="px-3 py-1 bg-teacher hover:bg-teacher/90 text-white text-xs rounded-lg transition-colors">
                立即解答
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div class="mt-6 text-center">
        <button class="px-6 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
          加载更多 <i class="fa fa-angle-down ml-1"></i>
        </button>
      </div>
    </div>
  </main>

  <!-- 底部导航（移动端） -->
  <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-2 px-6 flex justify-around">
    <a href="#" class="flex flex-col items-center text-teacher">
      <i class="fa fa-home text-lg"></i>
      <span class="text-xs mt-1">首页</span>
    </a>
    <a href="#" class="flex flex-col items-center text-gray-500">
      <i class="fa fa-question-circle text-lg"></i>
      <span class="text-xs mt-1">答疑</span>
    </a>
    <a href="#" class="flex flex-col items-center text-gray-500">
      <i class="fa fa-users text-lg"></i>
      <span class="text-xs mt-1">学生</span>
    </a>
    <a href="#" class="flex flex-col items-center text-gray-500">
      <i class="fa fa-user text-lg"></i>
      <span class="text-xs mt-1">我的</span>
    </a>
  </div>

  <script>
    // 初始化教学统计图表
    document.addEventListener('DOMContentLoaded', function() {
      const ctx = document.getElementById('teachingChart').getContext('2d');
      new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['已解答', '待解答', '学生互答'],
          datasets: [{
            data: [65, 15, 20],
            backgroundColor: [
              '#7209b7',
              '#f72585',
              '#4cc9f0'
            ],
            borderWidth: 0,
            cutout: '70%'
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                boxWidth: 10,
                padding: 10,
                font: {
                  size: 10
                }
              }
            }
          }
        }
      });
    });
  </script>
</body>
</html>